<template>
	<view class="bindPay Column">
		<u-navbar placeholder style="width: 100%;" title="我的银行卡" rightIcon="plus" @leftClick="leftClick"
			@rightClick="rightClick">
		</u-navbar>

		<!-- 银行卡列表 -->
		<view class="lervor-card-page">
			<swiper indicator-dots class="card-swiper" previous-margin="45rpx" next-margin="45rpx" @change="changeCard"
				indicator-color="#0056FF">
				<swiper-item v-for="(item, index) in cardList" :key="index">
					<view
						:class="['card-item', currentCardIndex === index ? 'card-item-current' : 'card-item-default']">
						<image class="card-bg" :src="item.caroLogo" mode="aspectFill"></image>
						<text class="card-price">{{ item.code }}</text>
						<text class="card-tip">BANK CARD NUMBER</text>
						<text
							class="card-title">****&nbsp;&nbsp;****&nbsp;&nbsp;****&nbsp;&nbsp;{{ item.cardAfterFour }}</text>
					</view>
					<view class="delete" @click="deleteSignUp(item.id)">删除</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 短信验证码 -->
		<view class="bodyer Column">
			<view class="bodyer_title">￥{{options.unit_price}}</view>
			<view class="input Row">
				<input placeholder-class="validateCode" type="number" v-model="validateCode" placeholder="输入验证码" />
				<button class="code-btn" :disabled="isCounting" @click="startCountdown">
					{{ buttonText }}
				</button>
			</view>
		</view>


		<view class="payment" @click="confirmPayment">立即支付</view>

		<h5 class="hint">
			<p>支持的银行：</p>
			<p>北京银行、广发银行、交通银行、民生银行、平安银行、浦发银行、华夏银行、上海银行、工商银行、光大银行、建设银行、中国银行、邮储银行、中信银行、招商银行（不支持借记卡）。</p>
			<p style="font-weight: 550;">不支持的银行：兴业银行、农业银行。</p>
		</h5>
	</view>
</template>

<script>
	import {
		forEach
	} from 'neo-async';
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	import {
		showLoading,
		showToast,
		showError,
		hideLoading
	} from '@/utils/toast';
	import {
		bankCodes
	} from '@/utils/bankCodes.js';
	export default {
		data() {
			return {
				systemInfo: uni.getSystemInfoSync(),
				options: {},
				cardList: [], // 已绑定银行卡
				currentCardIndex: 0,
				// 短信验证码
				validateCode: '',
				// 验证码
				count: 60,
				isCounting: false,
				timer: null,
				originalText: '获取验证码'
			}
		},
		computed: {
			buttonText() {
				return this.isCounting ? `${this.count}秒后重发` : this.originalText
			}
		},
		onLoad(options) {
			this.options = options;
			this.bindLogs();
		},
		methods: {
			deleteSignUp(id) {
				let that = this;
				uni.showModal({
					title: '确认解除绑定？',
					confirmColor: "#ea1f17",
					success: function(res) {
						if (res.confirm) {
							uni.$u.http.post('/kafu.dt_user/withdrawDeleteSignUp', {
								signup_id: id // 签约记录ID
							}).then(res => {
								if (res.code == 0) {
									uni.$u.toast(res.msg);
									return;
								}
								showToast('删除成功');
								that.bindLogs();
							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			getBankName(code) {
				return bankCodes[code] || '未知银行';
			},
			// 获取绑卡记录
			bindLogs() {
				let that = this;
				uni.$u.http.post('/kafu.helipay/bindLogs', {}).then(res => {
					let array = res.data;
					array.forEach(element => {
						element.caroLogo = '/static/bj.gif';
						element.code = that.getBankName(element.bankId);
						that.cardList.push(element);
					});
				}).catch(err => {
					console.log(err)
				})
			},

			// 绑卡支付预下单 获取短信验证码
			bindPay() {
				showLoading();
				// console.log(this.options.order_id)
				uni.$u.http.post('/kafu.helipay/quick_pay_bind_pay_pre_order', {
					order_id: this.options.order_id, // 订单id
					bindId: this.cardList[this.currentCardIndex].bindId, //  绑卡ID，合利宝生成的唯一绑卡ID
					terminalType: "OTHER",
					terminalId: this.systemInfo.deviceId, //唯一标识
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}

					this.paymentSMS();
					hideLoading();
				}).catch(err => {
					console.log(err)
				})
			},
			// 绑卡支付短信
			paymentSMS() {
				uni.$u.http.post("/kafu.helipay/quick_pay_bind_pay_send_validate_code", {
					order_id: this.options.order_id, //  订单id
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}
					uni.$u.toast("验证码已发送");
				}).catch(err => {
					console.log(err)
				})
			},

			// 确认支付
			confirmPayment() {
				if (!this.validateCode) {
					showToast('请输入验证码');
					return;
				}

				uni.$u.http.post("/kafu.helipay/quick_pay_confirm_bind_pay", {
					order_id: this.options.order_id, //  订单id
					validateCode: this.validateCode, // 短信验证码
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}
					uni.$u.toast("支付成功");
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/materialRequisition/materialRequisition'
						})
					}, 1500)
				}).catch(err => {
					console.log(err)
				})
			},

			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			rightClick() {
				uni.navigateTo({
					url: "/pages/index/materialRequisition/productDetail/CardPay/CardPay?order_id=" +
						this.options.order_id
				})
			},
			changeCard(e) {
				this.currentCardIndex = e.detail.current;
			},

			startCountdown() {
				if (this.isCounting) return

				this.bindPay();

				this.isCounting = true
				this.count = 60
				this.timer = setInterval(() => {
					this.count--
					if (this.count <= 0) {
						this.resetCountdown()
					}
				}, 1000)
			},

			resetCountdown() {
				clearInterval(this.timer)
				this.timer = null
				this.isCounting = false
				this.count = 60
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.hint {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 90%;
		font-size: 16px;
		font-weight: 500;
		padding: 20px 20px;


		.hint p:nth-child(3) {
			font-weight: 550;
			padding-top: 10px;
		}

		.hint p:nth-child(4) {
			font-weight: 550;
		}
	}

	.bindPay {
		align-items: center;
	}

	.code-btn {
		width: 110px;
		height: 100%;
		color: #0056FF;
		font-size: 15px;
		background: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	uni-button:after {
		border: none !important;
	}

	.bodyer {
		width: 87%;
		background: #fff;
		align-items: center;
		border-radius: 6px;
		box-shadow: 4px 4px 10px #e6e6e6;
		padding: 0 12px 16px 12px;
		margin: 32px 0 20px;

		&_title {
			font-size: 30px;
			padding: 28px 0;
		}

		.input {
			justify-content: space-between;
			align-items: center;
			width: 90%;
			border-radius: 4px;
			background: #f1f1f1;
			font-size: 14px !important;
			padding: 4px 0px 4px 14px;

			.getCode {
				color: #0056FF;
			}
		}
	}

	.payment {
		width: 93%;
		text-align: center;
		background-color: #0056FF;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		box-shadow: 4px 4px 10px #0056ff6e;
		padding: 12px 0;
	}

	// 滑动卡片
	.lervor-card-page {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;
		position: relative;

		view,
		text,
		image {
			box-sizing: border-box;
		}

		.delete {
			width: 87px;
			height: 43px;
			text-align: center;
			line-height: 50px;
			color: #fff;
			border-radius: 0 0 8px 0;
			overflow: hidden;
			background: url(/static/jiaobiao.png) no-repeat;
			z-index: 9;
			padding-left: 14px;
			position: absolute;
			bottom: 0;
			right: 0;
		}

		.card-swiper {
			width: 100%;
			height: 286rpx; // 轮播图片的高度

			//设置轮播的指示点大小
			::v-deep .uni-swiper-wrapper {
				overflow: visible !important;
			}

			//设置轮播的指示点大小
			::v-deep .uni-swiper-dots {
				// 指示点整个区域的位置
				top: 310rpx !important;
			}

			::v-deep .uni-swiper-dot {
				// 指示点元素默认样式
				width: 9upx !important;
				height: 9upx !important;
				background: #9a9a9a !important;
			}

			::v-deep .uni-swiper-dot-active {
				// 指示点元素**（当前选中）状态样式
				width: 32upx !important;
				height: 8upx !important;
				background: #0056FF !important;
				border-radius: 4rpx;
			}

			.card-item {
				transition: transform 0.3s; // 缩放动画播放 0.3S
				border-radius: 6px 6px 34px 6px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				padding: 26rpx 36rpx 0;
				color: #FFFFFF;
				box-shadow: 4px 4px 10px #0056FF;
				position: relative;

				.card-bg {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
				}

				.card-title {
					height: 30px;
					font-size: 25px;
					text-align: center;
					letter-spacing: 3px;
					/* font-weight: bold; */
					overflow: hidden;
				}

				.card-tip {
					color: #ffffff7a;
					font-size: 22rpx;
					margin-bottom: 4px;
				}

				.card-price {
					font-size: 14px;
					margin-bottom: 40rpx;
				}
			}

			.card-item-default {
				transform: scale(0.96, 0.96) translateY(50rpx); // 缩小到原来的 0.96，并沿Y轴向下移动 50rpx
			}
		}
	}
</style>